<template>
  <div>
    <div class="my-tree">
      <!-- :show-checkbox="true" -->
      <el-tree ref="treeRef" node-key="id" show-checkbox check-strictly :data="list" :props="{ label: 'name' }" @node-click="handleNodeClick" />
    </div>
    <div class="permission-btns">
      <el-button type="primary" round @click="onSubmit">确定</el-button>
      <el-button round @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getPermissionRequest } from '@/api/permissions'
import { transformListToTree2 } from '@/utils'
import { assignPermissionRequest, getRoleDetailByIdRequest } from '@/api/settings'
export default {
  name: 'AssignPermission',
  props: {
    currentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: []
    }
  },
  created() {
    this.getPermission()
  },
  methods: {
    cancel() {
      this.$emit('close')
    },
    async onSubmit() {
      // console.log(this.$refs.treeRef.getCheckedNodes())
      // console.log(this.$refs.treeRef.getCheckedKeys())
      try {
        const res = await assignPermissionRequest({
          id: this.currentId,
          permIds: this.$refs.treeRef.getCheckedKeys()
        })
        if (res.success) {
          //
          this.cancel()
        } else {
          this.$message.error('分配权限失败')
        }
      } catch (err) {
        console.log('assignPermissionRequest: ', err)
      }
    },
    // 获取数据
    async getPermission() {
      // 公司里面写请求： try。。catch必写 +  业务成功失败也必写  （与后端沟通： 你所有接口那个字段表示当前业务请求成功，告诉我一个字段，我好去封装前端的请求）
      try {
        const res = await getPermissionRequest()
        // res.code === 10000 有些后端 通过一个code码 10000表示业务成功， 非10000表示特殊的请求失败
        if (res.success) {
          // console.log('getPermissionRequest: ', res)
          console.log('服务器的返回:', res.data)
          this.list = transformListToTree2(res.data, '0')
          console.log('转换为树形结构之后的数据:', this.list)
        } else {
          this.$message.error('获取权限接口失败')
        }
        // 下面的请求是用来数据回显的， 会用当前用户的详情
        const res2 = await getRoleDetailByIdRequest(this.currentId)
        if (res2.success) {
          // 如果成功以后，就将返回值里面的数组，赋值给树形组件，进行回显
          console.log(res2)
          this.$refs.treeRef.setCheckedKeys(res2.data?.permIds || [])
        } else {
          this.$message.error('当前用户的详情接口失败')
        }
      } catch (err) {
        console.log('getPermissionRequest: ', err)
      }
    },
    handleNodeClick() {

    }
  }

}
</script>
